<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选购物车</title>
    <!-- 引入重置样式表 reset.css -->
    <link rel="stylesheet" href="../css/reset.css">
    <!-- 引入购物车样式表 productCart.css -->
    <link rel="stylesheet" href="../css/productCart.css">
</head>

<body>
    <!-- 页头 -->
    <header id="baseHead">
        <div class="wrapper">
            <!-- 右边logo区域 -->
            <section class="logo">
                <a href="#" title="返回首页">
                    <img src="../static/image/panda-logo.png" alt="logo">
                </a>
                <div class="right">
                    <h3>熊猫优选</h3>
                    <span>XIONG MAO YOU XUAN</span>
                </div>
            </section>
            <!-- 中间名称区域 -->
            <div class="search">
                <h1>熊猫优选购物车</h1>
            </div>
            <!-- 右边品牌保证区域 -->
            <section class="advantage">
                <ul>
                    <li>
                        <img src="../static/image/panda-logo1.png" alt="全程包邮">
                        <span>全程包邮</span>
                    </li>
                    <li>
                        <img src="../static/image/panda-logo2.png" alt="7天退换">
                        <span>7天退换</span>
                    </li>
                    <li>
                        <img src="../static/image/panda-logo3.png" alt="品质保证">
                        <span>品质保证</span>
                    </li>
                </ul>
            </section>
            <!-- 用户信息区域 -->
            <section id="userinfor">
                <img src="../static/image/懵.jpg" alt="用户头像" id="header">
                <label for="#">用户昵称：叶叶叶<span id="nick"></span></label>
            </section>
        </div>
    </header>
    <!-- 导航栏 -->
    <div id="nav">
        <ul>
            <li id="homePages" onclick="homePages()">首页</li>
            <li id="packageMail" onclick="packageMail()">9块9包邮</li>
            <li id="ticket" onclick="ticket()">超值大额券</li>
            <li id="coolOutfit" onclick="coolOutfit()">降温急救穿搭</li>
        </ul>
    </div>
    <!-- **************************************************************************** -->
    <!-- 购物车商品 -->
    <div class="container">
        <div class="book-list">
            <table>
                <script type="text/html" id="cartProduct">
                    <tr class='th'>
                        <th>商品图片</th>
                        <th>商品信息</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>总价</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        {{each productList}}
                        <td><img src="{{$value.img}}" alt="shop03"></td>
                        <td>{{$value.title}}</td>
                        <td>￥{{$value.price}}</td>
                        <td><input type="button" name="minus" value="-" class="minus"
                                onclick="minus({{$value.id}})"><input type="text" name="amount" value="{{$value.num}}"
                                class='amount'><input type="button" name="plus" value="+" class="plus"
                                onclick="add({{$value.id}})"></td>
                        <td class="singleprice" width="100px">￥{{($value.num*$value.price).toFixed(2)}}</td>
                        <td><a href="#" class="removebtn">移入收藏</a><br><a class="deletebtn" href="#"
                                onclick="deleteProduct({{$value.id}})">删除</a></td>
                    </tr>
                    {{/each}}
                </script>
            </table>
            <h2>商品总价: <span id="totalPrice">￥0</span></h2>
        </div>
    </div>
    <!-- *********************************************************************** -->
    <!-- 回到顶部 -->
    <div id="back-top">
        <img src="../static/image/back-top.png" alt="回到顶部">
    </div>
    <!-- 页脚 -->
    <footer id="footer">
        <div class="base-footer">
            <div class="footer-container">
                <img src="../static/image/panda-logo.png" alt="logo">
                <div class="footer-content">
                    <h1>熊猫优选</h1>
                    <p>年轻人网购首选</p>
                    <p>购物领券更省钱</p>
                </div>
                <div class="about-us">
                    <p><span>|</span><a href="#">下载app</a></p>
                </div>
                <div class="footer-buttom">
                    <img src="../static/image/panda-police.png" alt="公安logo" class="police-icon">
                    <p>
                        <span>浙公安网备案 33010602009949号-1</span>
                        ICP备案号:
                        <a href="#">浙ICP备17012864号-1</a>
                        |
                    </p>
                    <img src="../static/image/panda-police2.png" alt="公安logo" class="police-icon">
                    <p>
                        <a href="#">证照信息</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <!-- 安全认证lofo -->
    <div id="security">
        <a href="#"><img src="../static/image/panda-lable.png" alt="安全认证lofo"></a>
    </div>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/template-web.js"></script>
    <script src="../js/productCart.js"></script>
</body>

</html>